

// 引入公共头和尾
$('#detail-header').load('../pages/header.html')
$('#detail-foot').load('../pages/foot.html')
// 轮播
var mySwiper =new Swiper(".swiper-container", {
    loop: true,
    initialSlide: 0,
    autoplay: true,
    pagination: {
      el: ".swiper-pagination",
      clickable: true, //点击小原点切换图片
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });

  //鼠标覆盖停止自动切换
mySwiper.el.onmouseover = function(){
    mySwiper.autoplay.stop();
  }
  
  //鼠标离开开始自动切换
  mySwiper.el.onmouseout = function(){
    mySwiper.autoplay.start();
  }
 
   //放大镜图片
  const bigpic=document.querySelector('.big-pic')
  const img1 = document.querySelector('.big-box img')
  console.log('img1',img1)
  const lis = document.querySelector('.swiper-wrapper')
  console.log(lis)
  const pic = document.querySelector('.swiper-container')
  const right = document.querySelector('.big-box')
  const box1 = document.querySelector('.small-box')
  pic.addEventListener('mousemove', function (e) {
      e = e || window.event
      var x = e.offsetX - box1.offsetWidth / 2
      var y = e.offsetY - box1.offsetHeight / 2
      // console.log(x, y)
      if (x < 0) { x = 0 }
      if (y < 0) { y = 0 }
      if (x > pic.offsetWidth - box1.offsetWidth) { x = pic.offsetWidth - box1.offsetWidth }
      if (y > pic.offsetHeight - box1.offsetHeight) { y = pic.offsetHeight - box1.offsetHeight }

      box1.style.left = x + "px"
      box1.style.top = y + "px"
      let ximg = x * right.offsetWidth / box1.offsetWidth
      // console.log(  'box1.offsetWidth',box1.offsetWidth)
      let yimg = y * right.offsetHeight / box1.offsetHeight
    
      let l=-ximg +'px'
      let t=-yimg +'px'
      $('.big-box img').css({left:l,top:t})
      
  })
  // 显示
  pic.addEventListener('mouseover', function () {
      box1.style.display = 'block'
      right.style.display='block'
      big()    
  })
  // 隐藏
  pic.addEventListener('mouseout', function () {
      box1.style.display = 'none'
      right.style.display='none'
  })

  //计算图片比例   图片位置=
  function big() {
      bigpic.style.width = pic.offsetWidth * right.offsetWidth / box1.offsetWidth + 'px'
     bigpic.style.height = pic.offsetHeight * right.offsetHeight / box1.offsetHeight + 'px'
      console.log('img1.style.width', bigpic.style.width,img1.style.height)
      $('.big-box img').width(bigpic.style.width)
      $('.big-box img').height(bigpic.style.height)
  }

  //渲染详情页
  let Arr=JSON.parse(localStorage.getItem('detail'))
  console.log('arr',Arr)
  let img = Arr.photo;  // banner的图 
  let text = Arr.title; // 商家介绍标题
  let youquan = Arr.couponValue;  // 有券  
  let oldPrice = Arr.tbOriginPrice;// 以前的价格
  let price = Arr.price;  // 现在的价格 
  let imgs = Arr.descContentList;// 下面介绍的图
  let date = Arr.coupon.expireDate; // 有效期截止 
  let buy = Arr.saleNum;// 多少人已买  
  let people = Arr.shop.nickname;// 卖家的店名 
  let picture = Arr.shop.picUrl; // 卖家商店图片  
  let wuliu = Arr.shop.deliveryScore;// 物流评分 
  let miaosu=Arr.shop.itemScore// 描述评分
  let server=Arr.shop.serviceScore// 服务评分
function showDetail(){
 // 渲染轮播
let str=''
img.forEach(item => {
     str +=`
     <img src="${item.url} " class="wrapper swiper-slide">
    `
});
// 标题
   $('.swiper-wrapper').html(str)
let str2=`${text}         `
$('.detail-reduce>h1>span').html(str2)
// 原价
let str3=` 原价￥${oldPrice}`
$('.prev-oldPrice i').html(str3)
// 现在的价格
let str4=` <i style="font-size: 20px; font-style: normal;">￥</i>
${Math.floor(price)}
<span style="font-size: 28px;">.${
    typeof (price, price.toString().split(".")[1]) ==
    typeof "string"
      ? (price,price.toString().split(".")[1])
      : " "
  }</span>
  <span class="juan">${youquan}</span>
<span class="people-num  right">${buy}人已买</span>
  `
  $('.new-price-span2').html(str4)
//   有效期
  let str5=`  优惠有效期：${ date} `
  $('.youhui').html(str5)
// 商家店名
let str6=`
<div class="shop-info">
<span class="shop-line"></span>
<span class="shop-text">${people}息</span>
<span class="shop-line"></span>
</div>
<img src="${picture}" alt="" class="shop-img">
<p class="shop-name">王一博和我的店</p>
<div class="shop-pinglun">
<ul class="shop-wuliu">
    <li>描述</li>
    <li>服务</li>
    <li>物流</li>
</ul>
<ul class="shop-score">
    <li>${miaosu}</li>
    <li>${server}</li>
    <li>${wuliu}</li>
</ul>
</div>
`
$('.detail-top-right').html(str6)
// 下边图片
let str7=''
imgs.forEach(item=>{
    // console.log('imgs',item.image.url)
    str7+=`<img src="${item.image.url}" alt="">
    `
    $('.detail-bottom-img').html(str7)
})
}
showDetail()
// 找图片赋值给放大的位置
$('.swiper-slide').on('mouseover',function(){
  console.log($(this))
  let url=$(this).attr('src')//得到当前轮播的图片地址
  console.log('url',url)
  let str=`<img src="${url}" alt=""  >`
  $('.big-box').html(str)
  console.log('赋值的图片地址',url)
})
// 点击加入购物车  将数据存储

// console.log('cart',cart)
$('.add-btn').on('click',function(){
  alert('添加成功')
  // 详情页的数据
  let product = {
    id:Arr.id,
    img: Arr.shop.picUrl,
    name: Arr.title,
    price: Arr.price,
    num: 1,
    singlePrice: ((Arr.price*Arr.num).toFixed(2)),
    state: false,
  };
  let cart=JSON.parse(localStorage.getItem('Cart')) || []  //存储到购物车的数据
  // 拿到商品id
  let id=Arr.id
  let newProduct=cart.find(item =>item.id==id)
  if(newProduct){
    newProduct.num++
  }else{
    cart.push(product)
  }
localStorage.setItem('Cart',JSON.stringify((cart)))
})

// 舔砖页面
// $('.a').on('click',function(){
//   alert('ddd')
//   location.href='../pages/cart.html'
// })